<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Lily后台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/css/admin.css" media="all">
  <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
</head>
<!--头部脚部 代码新增或者修改页面 -->
<body class="layui-layout-body">
<div class="layui-fluid">
    <div class="layui-card">
    	<form class="layui-form" action="" style='padding:10px'>
    		  
        
        <div class="layui-form-item">
            <label class="layui-form-label">所属父类</label>
            <div class="layui-input-block">
              <select name="quiz0" id="quiz0" lay-filter="sel1">
                <option value="0">请选择分类</option>
                {volist name="sel" id="data"}
                <option value="{$data['id']}">{$data.cname}</option>
                {/volist}
              </select>
            </div>
            <div class="layui-input-block" style="margin-top:10px;display:none">
              <select name="quiz1" id='quiz1' lay-filter="sel2">
                <option value="0">请选择分类</option>
                <option value=""> </option>
              </select>
            </div>
            <div class="layui-input-block" style="margin-top:10px;display:none">
              <select name="quiz2" id='quiz2'>
                <option value="0">请选择分类</option>
                <option value=""></option>
              </select>
            </div>

        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
              <input type="text" name="cname" autocomplete="off" placeholder="请输入分类名称" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">上传图片</label>
          <div class="layui-input-block">
            <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-xs" id="upload_img">选择图片</button>
            <div class="layui-upload-list">
              <img class="layui-upload-img" style='width:200px' id="show_img">
              <p id="demoText"></p>
            </div>
          </div> 
          </div>
          <input type="text" name="newname" style="display:none" value="">
        </div>


		</form>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>

layui.use(['upload','form'], function(){
  var $ = layui.jquery,upload = layui.upload;
  var form = layui.form

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#upload_img'
    ,accept: 'file'
    ,url: "{:url('Base/upload')}"+"?upload_url=static/upload/classify/" //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#show_img').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.status == '0'){
        return layer.msg(res.msg);
      }else{ //上传成功
        $("input[name='newname']").val(res.newname);
        return layer.msg(res.msg);
      }
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });

  /*联动1*/
  form.on('select(sel1)', function(data){   
      var val=data.value;
      if(val=='0'){
        $("#quiz1").parent().css('display','none');
        $("#quiz1").html('');
        $("#quiz2").parent().css('display','none');
        $("#quiz2").html('');
        form.render('select');
        return false;
      }
      $.post("{:url('Classify/sel')}",{val:val},function(res){
          $("#quiz1").html(res);
          $("#quiz1").parent().css('display','block');
          form.render('select');
      })
  });
  /*联动2*/
  form.on('select(sel2)', function(data){   
      var val=data.value;
      if(val=='0'){
        $("#quiz2").parent().css('display','none');
        $("#quiz2").html('');
        form.render('select');
        return false;
      }
      $.post("{:url('Classify/sel')}",{val:val},function(res){
          $("#quiz2").html(res);
          $("#quiz2").parent().css('display','block');
          form.render('select');
      })
  });
  
 
}); 


</script>
</body>
</html>